<template>
  <view class="line-up-message" id="line-up-message-id">
    <view class="line-up-icon">
      <view class="chatIcon icon-dengdai"></view>
    </view>
    <view class="line-up-content">
      <view class="line-up-title">已经收到您的消息了，请耐心等待</view>
      <view class="line-up-info">
        当前排队前方还有
        <text class="line-up-number">{{ count || '-' }}</text>
        人
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";

const count = ref(0);

onMounted(() => {
  // 监听排队人数变化
  uni.$on("updateLineUpCount", (value: number) => {
    count.value = value;
  });

  // 通知组件已经挂载
  uni.$emit("line-up-mounte", true);
});

onUnmounted(() => {
  // 移除监听
  uni.$off("updateLineUpCount");
});
</script>

<style scoped lang="scss">
.line-up-message {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 20rpx;
  margin: 20rpx;

  .line-up-icon {
    .chatIcon {
      font-size: 60rpx;
      color: #ffc549;
    }
  }

  .line-up-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #7e7e7e;

    .line-up-title {
      font-size: 28rpx;
      margin-bottom: 10rpx;
      text-align: center;
    }

    .line-up-info {
      text-align: center;
      font-size: 26rpx;

      .line-up-number {
        color: #2d8cf0;
        font-size: 28rpx;
        font-weight: bold;
        margin: 0 8rpx;
      }
    }
  }
}
</style>
